.app-container {
    display: flex;
    width: 100%;
    justify-content: center;
    .container {
        display: flex;
        flex-wrap: wrap;
        position: relative;
        .handler {
          display: flex;
          justify-content: center;
        }
    }
}

.grid-container {
    padding: 3px;
}

.book-card {
margin-bottom: 20px;
transition: all 0.3s;

&:hover {
    transform: translateY(-5px);
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
}
}

.book-image {
width: 100%;
height: 190px;  // 默认高度（手机端）

@media screen and (min-width: 768px) {  // 电脑端
    height: 210px;
}
}

.book-info {
padding: 3px;
display: flex;
flex-direction: column;
align-items: center;
}

.book-title {
font-size: 14px;
text-decoration: none;
margin-bottom: 10px;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 100%;
}

.book-actions {
width: 100%;
display: flex;
justify-content: center;
}